<template>
	<div class="login">
		<h1>用户登录</h1>
		<input type="text" placeholder="请输入用户名" v-model="username">
		<input type="password" placeholder="请输入密码" v-model="password">
		<button @click="handleLogin">登录</button>
		<button @click="handleReset">重置</button>
	</div>
</template>

<script lang=ts setup>
import { ref } from 'vue'
import axios from 'axios'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
const username = ref('')
const password = ref('')
const store = useStore()
const router = useRouter()
const handleLogin = async () => {
	const data = {
		username: username.value,
		password: password.value
	}
	const resp = await axios.post('/api/login', data)
	const { code, message, data: respData } = resp.data;
	if (code === 200) {
		store.commit('setUser', { isLogin: true, token: 'XXXX', avator: respData.avator, nickname: respData.nickname })
		localStorage.setItem('token', 'XXXXXX')
		router.push('/home')
	} else {
		2
	}

	console.log(code, message, respData);
}

const handleReset = () => {
	username.value = ''
	password.value = ''
}
</script>


<style lang="scss" scoped>
.login {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 10px;

	input,
	button {
		height: 46px;
		margin: 4px 0;
	}

	h1 {
		text-align: center;
	}

}
</style>


